<template>
  <gesture-back>
    <view class="subpage-container">
      <!-- 顶部标题 -->
      <view class="header">
        <view class="back-btn" @click="goBack">
          <text class="iconfont icon-back"></text>
        </view>
        <text class="title">意见反馈</text>
        <view class="placeholder"></view>
      </view>
      
      <!-- 页面内容 -->
      <view class="content">
        <view class="feedback-form">
          <view class="form-item">
            <textarea class="feedback-input" placeholder="请输入您的意见或建议" maxlength="500" v-model="feedbackContent"></textarea>
            <view class="word-count">{{feedbackContent.length}}/500</view>
          </view>
          
          <view class="form-item">
            <input class="contact-input" type="text" placeholder="联系方式（选填）" v-model="contactInfo" />
          </view>
          
          <button class="submit-btn" @click="submitFeedback">提交反馈</button>
        </view>
      </view>
    </view>
  </gesture-back>
</template>

<script>
import GestureBack from '@/components/gesture-back/index.vue';

export default {
  components: {
    GestureBack
  },
  data() {
    return {
      feedbackContent: '',
      contactInfo: ''
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    submitFeedback() {
      if (!this.feedbackContent.trim()) {
        uni.showToast({
          title: '请输入反馈内容',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({
        title: '提交中...'
      });
      
      // 模拟提交
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        });
        
        // 重置表单
        this.feedbackContent = '';
        this.contactInfo = '';
        
        // 返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }, 1000);
    }
  }
};
</script>

<style lang="scss">
.subpage-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 0 30rpx;
  position: relative;
}

.back-btn {
  font-size: 40rpx;
  color: #333;
  width: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 500;
}

.placeholder {
  width: 40rpx;
}

.content {
  padding: 30rpx;
}

.feedback-form {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;
  position: relative;
}

.feedback-input {
  width: 100%;
  height: 240rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.word-count {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  font-size: 24rpx;
  color: #999;
}

.contact-input {
  width: 100%;
  height: 80rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  background-color: #1989fa;
  color: #fff;
  border-radius: 8rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 